// JavaScript Document
$(function(){
	$('.box').animate({width:'1000px',height:'5000px'},5000)
	/*左右滑动*/
	//获取li的个数
	var leng=$('#slideBox ul li').length;
	var ulW=182*leng;
	//alert(ulW)
	//设置ul的宽度
	$('#slideBox ul').css({'width':ulW+'px'}); //变量不能够被引号包围 字符串一定要被引号包围 此处的+号起连接作用
	var i=0; //移动840的倍数
	var tt;
	function autoMove(){
		//图片自动滚动
		tt=setInterval(function(){
			/*i++;
			if(i*840>=ulW){
				i=0;
			}*/
			$('#slideBox ul').animate({marginTop:'-182px'},function(){
				$(this).css({'margin-top':'0'}).find('li:first').appendTo('#slideBox ul');	
			})	
		},3000)	
	}
	autoMove();
	//鼠标放到slide上面停止滑动，移开继续滑动
	$('#slide').hover(function(){
		//
		clearInterval(tt);
	},function(){
		autoMove();
	})
	$('#slideBox ul').css({'width':ulW+'px'});
	//点击小图片列表
	$('#slideBox ul li').click(function(){
		//获取小图片的src值
		var smallSrc=$(this).children().attr('src');
		//alert(smallSrc)
		//设置大图的src值为当前被点击的小图的src值
		$('#bigPic img').attr('src',smallSrc)
		//给当前的li增加current样式 移除其他的li的current样式
		$(this).addClass('current').siblings().removeClass('current');
	})
	//点击下一组
	$('#right').click(function(){
			$('#slideBox ul').animate({marginTop:'-182px'},function(){
				$(this).css({'margin-top':'0'}).find('li:first').appendTo('#slideBox ul');	
			})		
	})
	//点击上一组
	$('#left').click(function(){
		$('#slideBox ul').css({'margin-top':'-182px'}).find('li:last').prependTo('#slideBox ul');
		$('#slideBox ul').animate({marginTop:'0'});
	})
})